import { useState } from 'react';
import  './invo.css'
import { useNavigate } from 'react-router-dom';
type Tab = {
  id: string;
  label: string;
  count: number;
};

type TabGroupProps = {
  tabs: Tab[];
};

const TabGroup = ({ tabs }: TabGroupProps) => {
  const [selectedTab, setSelectedTab] = useState(tabs[0].id);
  const navgite=useNavigate()
  return (
    <div className="tab-group-container">
      <div className="tabs-container">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab-item ${selectedTab === tab.id ? 'active' : ''}`}
            onClick={() => setSelectedTab(tab.id)}
          >
            {tab.label}（{tab.count}）
          </button>
        ))}
      </div>
      <button className="invoice-button" onClick={()=>navgite('/admin/fapiao/fapiaodetail')}>申请开票</button>
    </div>
  );
};

// 使用示例
const InvoiceTabs = () => {
  const tabs: Tab[] = [
    { id: 'all', label: '全部', count: 10 },
    { id: 'invoiced', label: '已开发票', count: 5 },
    { id: 'uninvoiced', label: '未开发票', count: 5 },
    { id: 'applying', label: '申请中', count: 2 },
  ];

  return <TabGroup tabs={tabs} />;
};

export default InvoiceTabs;